import { usePageInfoStore } from '@/store/pageInfo';
import { EditOutlined } from '@ant-design/icons';
import { Button, Input, Space, Typography } from 'antd';
import { FC, useState } from 'react';
import style from './index.module.scss';

const { Title } = Typography;

const TitleElem: FC = () => {
  const { pageInfo, update } = usePageInfoStore();
  const { title } = pageInfo;
  const [changing, setChnaging] = useState(false);

  function onChange(e?: React.ChangeEvent<HTMLInputElement>) {
    const v = e?.target.value.trim() || '';
    update({ title: v });
  }

  if (changing) {
    return (
      <Input
        value={title}
        onChange={onChange}
        onPressEnter={() => setChnaging(false)}
        onBlur={() => setChnaging(false)}
      />
    );
  }

  return (
    <Space>
      <Title className={style.title}>{title}</Title>

      <Button
        type="text"
        icon={<EditOutlined onClick={() => setChnaging(!changing)} />}
      />
    </Space>
  );
};

export default TitleElem;
